@back: rgb(255, 250, 250);
@navcolorl: rgb(29, 29, 29);
@hovercolor: rgb(202, 170, 145);
@hoverc: rgb(28, 175, 154);
@textcolor: rgb(236, 233, 233);
@btnc: rgb(255, 255, 255);
@pcol: rgb(238, 238, 238);
@featurescolor: rgb(43, 43, 43);
@listc: rgb(207, 207, 207);
@hiddenc: rgb(4, 129, 187);
@hiddenh1: rgb(20, 20, 20);
@CPM: rgb(240, 240, 240);
@CPMh1: rgb(83, 83, 83);
@borderc: rgb(207, 207, 207);
@button: rgb(5, 164, 238);
@buttonc: rgb(7, 119, 172);
@keyframes mymove {
  0% {
    transform: scale3d(0.5, 0.5, 0.5);
    opacity: 0;
  }
  50% {
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  100% {
    transform: scale3d(1, 1, 1);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
  }
}

.nav {
  width: 100%;
  height: 100%;
  a {
    &:nth-child(10) {
      background-color: @hoverc;
      color: white;
    }
  }
}
* {
  margin: 0;
  padding: 0;
}
.main-body-list-all {
  .main-body-list {
    flex-grow: 1;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    position: absolute;
    background-color: rgb(219, 231, 238);
    /* 滚动条的样式 */
    &::-webkit-scrollbar {
      width: 4px;
    }
    /* 滚动条里边小滑块的样式 */
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow-inset: 0 0 5px rgba(0, 0, 0, 0.2);
      background-color: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow-inset: 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
    h4 {
      position: absolute;
      font-weight: 600;
      top: 25px;
      left: 60px;
    }
    .features {
      width: 93%;
      height: 50px;
      background-color: @featurescolor;
      border-radius: 15px;
      position: absolute;
      top: 80px;
      left: 50px;
      display: flex;
      align-items: center;
      justify-content: left;
      .videoclass {
        width: 70px;
        height: 50px;
        margin-left: 10px;
        background-color: @featurescolor;
        select {
          width: 70px;
          height: 30px;
          position: absolute;
          top: 10px;
          left: 85px;
          outline: none;
        }
        p {
          font-size: 14px;
          text-align: center;
          line-height: 50px;
        }
      }
      .alllist {
        border-radius: 30px;
        background-color: rgb(179, 95, 26);
        border: none;
        color: #ffffff;
        margin-left: 30px;
        width: 100px;
        height: 30px;
        outline: none;
        cursor: pointer;
        &:hover {
          background-color: rgb(199, 86, 34);
          color: aliceblue;
        }
      }
      .select {
        border-radius: 30px;
        border: none;
        margin-left: 30px;
        width: 100px;
        height: 30px;
        outline: none;
        cursor: pointer;
        padding-left: 10px;
      }
      .select-input {
        border-radius: 30px;
        border: none;
        margin-left: 30px;
        width: 100px;
        height: 30px;
        outline: none;
        cursor: pointer;
        padding-left: 10px;
      }
      .select1-input {
        border-radius: 30px;
        border: none;
        margin-left: 30px;
        width: 100px;
        height: 30px;
        outline: none;
        cursor: pointer;
        padding-left: 10px;
      }
      .select2-input {
        border-radius: 30px;
        border: none;
        margin-left: 30px;
        width: 100px;
        height: 30px;
        outline: none;
        cursor: pointer;
        padding-left: 10px;
      }
      .delete-all {
        border-radius: 30px;
        border: none;
        color: #ffffff;
        margin-left: 30px;
        width: 100px;
        height: 30px;
        outline: none;
        cursor: pointer;
        background-color: rgb(223, 16, 102);
        &:hover {
          background-color: rgb(199, 34, 61);
          color: aliceblue;
        }
      }
      #search {
        width: 200px;
        height: 30px;
        outline: none;
        margin-left: 30px;
        padding-left: 5px;
        border-radius: 5px;
        border: 1px solid rgb(180, 180, 180);
        &:focus {
          transition: 0.5s;
          border: 2px solid rgb(126, 203, 255);
        }
      }
      #search1 {
        width: 200px;
        height: 30px;
        outline: none;
        margin-left: 30px;
        padding-left: 5px;
        border-radius: 5px;
        border: 1px solid rgb(180, 180, 180);
        &:focus {
          transition: 0.5s;
          border: 2px solid rgb(126, 203, 255);
        }
      }
      #search2 {
        width: 200px;
        height: 30px;
        outline: none;
        margin-left: 30px;
        padding-left: 5px;
        border-radius: 5px;
        border: 1px solid rgb(180, 180, 180);
        &:focus {
          transition: 0.5s;
          border: 2px solid rgb(126, 203, 255);
        }
      }
      #search3 {
        width: 200px;
        height: 30px;
        outline: none;
        margin-left: 30px;
        padding-left: 5px;
        border-radius: 5px;
        border: 1px solid rgb(180, 180, 180);
        &:focus {
          transition: 0.5s;
          border: 2px solid rgb(126, 203, 255);
        }
      }
      #search4 {
        width: 200px;
        height: 30px;
        outline: none;
        margin-left: 30px;
        padding-left: 5px;
        border-radius: 5px;
        border: 1px solid rgb(180, 180, 180);
        &:focus {
          transition: 0.5s;
          border: 2px solid rgb(126, 203, 255);
        }
      }
      #search5 {
        width: 200px;
        height: 30px;
        outline: none;
        margin-left: 30px;
        padding-left: 5px;
        border-radius: 5px;
        border: 1px solid rgb(180, 180, 180);
        &:focus {
          transition: 0.5s;
          border: 2px solid rgb(126, 203, 255);
        }
      }
      .search-btn {
        border-radius: 30px;
        background-color: rgb(26, 179, 148);
        border: none;
        color: #ffffff;
        margin-left: 30px;
        width: 70px;
        height: 30px;
        outline: none;
        cursor: pointer;
        &:hover {
          background-color: rgb(34, 199, 166);
          color: aliceblue;
        }
      }
      .search1-btn {
        border-radius: 30px;
        background-color: rgb(26, 179, 148);
        border: none;
        color: #ffffff;
        margin-left: 30px;
        width: 70px;
        height: 30px;
        outline: none;
        cursor: pointer;
        &:hover {
          background-color: rgb(34, 199, 166);
          color: aliceblue;
        }
      }
      .search2-btn {
        border-radius: 30px;
        background-color: rgb(26, 179, 148);
        border: none;
        color: #ffffff;
        margin-left: 30px;
        width: 70px;
        height: 30px;
        outline: none;
        cursor: pointer;
        &:hover {
          background-color: rgb(34, 199, 166);
          color: aliceblue;
        }
      }
      .search3-btn {
        border-radius: 30px;
        background-color: rgb(26, 179, 148);
        border: none;
        color: #ffffff;
        margin-left: 30px;
        width: 70px;
        height: 30px;
        outline: none;
        cursor: pointer;
        &:hover {
          background-color: rgb(34, 199, 166);
          color: aliceblue;
        }
      }
      .search4-btn {
        border-radius: 30px;
        background-color: rgb(26, 179, 148);
        border: none;
        color: #ffffff;
        margin-left: 30px;
        width: 70px;
        height: 30px;
        outline: none;
        cursor: pointer;
        &:hover {
          background-color: rgb(34, 199, 166);
          color: aliceblue;
        }
      }
      .search5-btn {
        border-radius: 30px;
        background-color: rgb(26, 179, 148);
        border: none;
        color: #ffffff;
        margin-left: 30px;
        width: 70px;
        height: 30px;
        outline: none;
        cursor: pointer;
        &:hover {
          background-color: rgb(34, 199, 166);
          color: aliceblue;
        }
      }
    }
    .list {
      width: 93%;
      height: 500px;
      position: absolute;
      top: 150px;
      left: 50px;
      table {
        border-radius: 10px;
        width: 100%;
        border-collapse: collapse;
        background-color: rgb(255, 255, 255);
        thead tr {
          width: 100%;
          height: 50px;
          #checkbox-all {
            width: 15px;
            height: 15px;
          }
        }
        tbody tr {
          width: 100%;
          height: 45px;
          &:hover {
            background-color: rgb(202, 170, 145);
          }
          .chexkbox {
            width: 15px;
            height: 15px;
          }
          // background-color: aqua;
          td {
            text-align: center;
            font-size: 14px;
            a {
              color: black;
              &:hover {
                color: @hoverc;
                border-bottom: 1px solid @hoverc;
              }
            }
            button {
              border-radius: 30px;
              border: none;
              color: #ffffff;
              margin-left: 10px;
              width: 55px;
              height: 30px;
              outline: none;
              cursor: pointer;
              &:nth-child(1) {
                background-color: rgba(0, 153, 255, 0.925);
                &:hover {
                  background-color: rgb(52, 205, 243);
                  color: #ffffff;
                }
              }
              &:nth-child(2) {
                background-color: rgba(0, 153, 255, 0.925);
                &:hover {
                  background-color: rgb(52, 205, 243);
                  color: #ffffff;
                }
              }
              &:last-child {
                background-color: rgb(255, 77, 77);
                &:hover {
                  background-color: rgb(255, 125, 125);
                  color: #ffffff;
                }
              }
            }
          }
        }
      }
      .jump {
        width: 80%;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        button {
          width: 60px;
          height: 30px;
          background-color: #ffffff;
          outline: none;
          border: 1px solid gray;
          cursor: pointer;
          &:hover {
            background-color: @hovercolor;
          }
        }
        .total {
          font-size: 14px;
          white-space: nowrap;
        }
        select {
          width: 70px;
          height: 30px;
          outline: none;
          margin-left: 50px;
        }
        .nowpage {
          width: 30px;
          height: 26px;
          padding-left: 20px;
          outline: none;
          margin-left: 10px;
          &:focus {
            transition: 0.5s;
            border: 2px solid rgb(126, 203, 255);
          }
        }
        p {
          margin-left: 20px;
          width: 80px;
          height: 30px;
          display: inline-block;
          text-align: center;
          line-height: 30px;
        }
        #pre,
        #next,
        .frist,
        .last {
          width: 60px;
          height: 30px;
        }
        a {
          width: 30px;
          height: 30px;
          display: inline-block;
          margin-left: 10px;
          border: 1px solid gainsboro;
          text-align: center;
          line-height: 30px;
          color: black;
          text-decoration: none;
          background-color: white;
          &:hover {
            background-color: rgb(202, 170, 145);
          }
        }
        .pagebtn {
          width: 30px;
          height: 30px;
          display: inline-block;
          margin-left: 10px;
          border: 1px solid gainsboro;
          text-align: center;
          line-height: 30px;
          color: black;
          text-decoration: none;
        }
      }
    }
  }
}
.photo-box {
  overflow: hidden;
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.356);
  z-index: 20;
  .photo-box-all {
    width: 400px;
    margin: 50px auto;
    display: block;
    position: relative;
    animation: mymove 1s;
    overflow: hidden;
    .back4 {
      user-select: none;
      font-size: 35px;
      text-align: center;
      line-height: 25px;
      width: 35px;
      height: 35px;
      display: inline-block;
      position: absolute;
      top: -3px;
      right: 12px;
      color: rgb(182, 188, 194);
      cursor: pointer;
      &:hover {
        color: rgb(70, 70, 70);
      }
    }
  }
}

.add-box {
  overflow: hidden;
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.356);
  z-index: 20;
  .add-box-all {
    width: 400px;
    height: 280px;
    display: block;
    margin: 0 auto;
    margin-top: 150px;
    border-radius: 10px;
    background-color: @CPM;
    position: relative;
    animation: mymove 1s;
    overflow: hidden;
    h3 {
      font-weight: 400;
      text-align: center;
      line-height: 50px;
      height: 50px;
      color: @CPMh1;
      border-bottom: 1px solid @borderc;
    }
    .back {
      user-select: none;
      font-size: 25px;
      text-align: center;
      line-height: 25px;
      width: 25px;
      height: 25px;
      display: inline-block;
      position: absolute;
      top: 12px;
      right: 12px;
      color: rgb(182, 188, 194);
      cursor: pointer;
      &:hover {
        color: rgb(70, 70, 70);
      }
    }
    .form {
      width: 100%;
      // height: 500px;
      overflow-y: auto;
      p {
        margin-top: 10px;
        display: inline-block;
        text-align: center;
        line-height: 40px;
        width: 100px;
        height: 40px;
        margin-left: 20px;
      }
      input {
        margin: 0 auto;
        width: 60%;
        height: 30px;
        display: inline-block;
        margin-top: 10px;
        outline: none;
        padding-left: 10px;
        &:focus {
          border: 2px solid rgb(126, 203, 255);
        }
      }
      .submit {
        width: 100px;
        height: 50px;
        background-color: @button;
        outline: none;
        border: none;
        border-radius: 5px;
        text-align: center;
        margin-bottom: 10px;
        // position: absolute;
        // bottom: 10px;
        // left: 50%;
        // transform: translateX(-50%);
        color: aliceblue;
        &:hover {
          cursor: pointer;
          background-color: @buttonc;
        }
      }
    }
  }
}
.modify-box {
  overflow: hidden;
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.356);
  z-index: 20;
  .modify-box-all {
    width: 400px;
    height: 430px;
    display: block;
    margin: 0 auto;
    margin-top: 150px;
    border-radius: 10px;
    background-color: @CPM;
    position: relative;
    animation: mymove 1s;
    overflow: hidden;
    h3 {
      font-weight: 400;
      text-align: center;
      line-height: 50px;
      height: 50px;
      color: @CPMh1;
      border-bottom: 1px solid @borderc;
    }
    .back1 {
      user-select: none;
      font-size: 25px;
      text-align: center;
      line-height: 25px;
      width: 25px;
      height: 25px;
      display: inline-block;
      position: absolute;
      top: 12px;
      right: 12px;
      color: rgb(182, 188, 194);
      cursor: pointer;
      &:hover {
        color: rgb(70, 70, 70);
      }
    }
    .form1 {
      width: 100%;
      // height: 500px;
      overflow-y: auto;
      p {
        margin-top: 10px;
        display: inline-block;
        text-align: center;
        line-height: 40px;
        width: 100px;
        height: 40px;
        margin-left: 20px;
      }
      input,
      .sex1,
      .age1 {
        margin: 0 auto;
        width: 60%;
        height: 30px;
        display: inline-block;
        margin-top: 10px;
        outline: none;
        padding-left: 10px;
        &:focus {
          border: 2px solid rgb(126, 203, 255);
        }
      }
      .submit1 {
        width: 100px;
        height: 50px;
        background-color: @button;
        outline: none;
        border: none;
        border-radius: 5px;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        color: aliceblue;
        &:hover {
          cursor: pointer;
          background-color: @buttonc;
        }
      }
    }
  }
}
.video-box {
  z-index: 0;
  overflow: hidden;
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.356);
  z-index: 20;
  .video-box-all {
    width: 70%;
    height: 70%;
    display: block;
    margin: 0 auto;
    margin-top: 90px;
    border-radius: 10px;
    background-color: @CPM;
    position: relative;
    animation: mymove 1s;
    overflow: hidden;
    h3 {
      font-weight: 400;
      text-align: center;
      line-height: 50px;
      height: 50px;
      color: @CPMh1;
      border-bottom: 1px solid @borderc;
    }
    .back-video {
      user-select: none;
      font-size: 25px;
      text-align: center;
      line-height: 25px;
      width: 25px;
      height: 25px;
      display: inline-block;
      position: absolute;
      top: 12px;
      right: 12px;
      color: rgb(182, 188, 194);
      cursor: pointer;
      &:hover {
        color: rgb(70, 70, 70);
      }
    }
    .delete-success {
      border-radius: 30px;
      background-color: rgb(237, 85, 101);
      border: none;
      color: #ffffff;
      margin-top: 10px;
      margin-left: 30px;
      width: 50px;
      height: 30px;
      outline: none;
      cursor: pointer;
      &:hover {
        background-color: rgb(199, 34, 103);
        color: aliceblue;
      }
    }
    .delete-nosuccess {
      border-radius: 30px;
      background-color: rgb(237, 85, 101);
      border: none;
      color: #ffffff;
      margin-top: 10px;
      margin-left: 30px;
      width: 70px;
      height: 30px;
      outline: none;
      cursor: pointer;
      &:hover {
        background-color: rgb(199, 34, 103);
        color: aliceblue;
      }
    }
    .table-video {
      border-radius: 5px;
      margin: 50px;
      margin-top: 20px;
      width: 90%;
      height: 70%;
      background-color: #ffffff;
      overflow-y: auto;
      position: relative;
      /* 滚动条的样式 */
      &::-webkit-scrollbar {
        width: 4px;
      }
      /* 滚动条里边小滑块的样式 */
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow-inset: 0 0 5px rgba(0, 0, 0, 0.2);
        background-color: rgba(0, 0, 0, 0.2);
      }
      &::-webkit-scrollbar-track {
        -webkit-box-shadow-inset: 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }
}
.pop1-box {
  z-index: 999;
  overflow: hidden;
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  // background-color: rgba(0, 0, 0, 0.356);
  z-index: 20;
  .pop1-box-all {
    width: 400px;
    height: 250px;
    display: block;
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 10px;
    background-color: @CPM;
    position: relative;
    animation: mymove 1s;
    overflow: hidden;
    h3 {
      font-weight: 400;
      text-align: center;
      line-height: 50px;
      height: 50px;
      color: @CPMh1;
      border-bottom: 1px solid @borderc;
    }
    .back-pop1 {
      user-select: none;
      font-size: 25px;
      text-align: center;
      line-height: 25px;
      width: 25px;
      height: 25px;
      display: inline-block;
      position: absolute;
      top: 12px;
      right: 12px;
      color: rgb(182, 188, 194);
      cursor: pointer;
      &:hover {
        color: rgb(70, 70, 70);
      }
    }
    .form-pop1 {
      width: 100%;
      // height: 500px;
      overflow-y: auto;
      p {
        text-align: center;
        font-size: 20px;
        margin-top: 50px;
      }
    }
    .submit1-pop1 {
      width: 100px;
      height: 50px;
      background-color: @button;
      outline: none;
      border: none;
      border-radius: 5px;
      margin: 45px;
      color: aliceblue;
      &:hover {
        cursor: pointer;
        background-color: @buttonc;
      }
    }
    .submit1-pop2 {
      width: 100px;
      height: 50px;
      background-color: @button;
      outline: none;
      border: none;
      border-radius: 5px;
      margin: 45px;
      color: aliceblue;
      &:hover {
        cursor: pointer;
        background-color: @buttonc;
      }
    }
  }
}
